{extend name="index/base" /}
{block name="content"}
<div>
    <form class="layui-form" action="">
        <input type="hidden" name="id" required value="{$data.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" name="username" value="{$data['username']}" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname"  required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" value="{$data['nickname']}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" value="{$data.mobile}" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否冻结</label>
            <div class="layui-input-block">
                <input type="radio" name="frozen" value="0" title="开启"  checked>
                <input type="radio" name="frozen" value="1" title="冻结">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <input type="hidden" name="avatar" id="avatar" value="{$data['avatar']}">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="avatarBtn"><i class="icon icon-upload3"></i>点击上传</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="Pic" src="{$data.avatar}">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit lay-filter="submit">提交</a>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    layui.use(['table','jquery','form','upload'], function(){
        var table = layui.table; var form = layui.form;var upload = layui.upload;
        var $ = layui.$;
        form.on('submit(submit)', function(data){
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('myProfile')}", data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        window.parent.location.reload();
                        return false;
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });

        var uploadInst = upload.render({
            elem: '#avatarBtn'
            ,url: '{:url("UpFiles/upload")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#Pic').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                if(res.code==0){
                    $('#avatar').val(res.url);
                }else{
                    //如果上传失败
                    return layer.msg('上传失败');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
</script>
{/block}